<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<!--组件 图标-->
<!-- Section - Bootstrap Brain Component -->
<section class="pb-3 pb-md-4 pb-xl-5 bg-light" th:fragment="IconBootstrap">
    <div class="container">
        <div class="row gy-3 gy-md-4">
            <div class="col-12">
                <div class="row gy-3 gy-md-4">
                    <div class="col-12">
                        <div class="card widget-card border-light shadow-sm">
                            <div class="card-header bg-transparent p-4 border-light-subtle">
                                <h5 class="card-title widget-card-title m-0">Bootstrap Icons</h5>
                            </div>
                            <div class="card-body p-4">
                                <p>Free, high quality, open source icon library with over 2,000 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts.</p>
                                <p><a class="text-decoration-none" href="https://icons.getbootstrap.com/" target="_blank">Visit Project Page</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card widget-card border-light shadow-sm">
                            <div class="card-header bg-transparent p-4 border-light-subtle">
                                <h5 class="card-title widget-card-title m-0">Sample Icons</h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="row gy-3">
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-airplane mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Airplane</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-alarm mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Alarm</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-archive mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Archive</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-aspect-ratio mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Ratio</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-award mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Award</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-bag mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Bag</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-balloon mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Baloon</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-balloon-heart mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Baloon</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-ban mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Ban</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-bank mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Bank</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-bar-chart mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Chart</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-basket mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Basket</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-battery mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Battery</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-bell mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Bell</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-book mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Book</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-briefcase mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Briefcase</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-brightness-high mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Brightness</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-brush mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Brush</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-bug mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Bug</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-calendar mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Calendar</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-camera mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Camera</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-camera-video mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Video</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-cart-plus mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Cart</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-cast mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Cast</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-chat mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Chat</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-check-lg mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Check</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-chevron-double-up mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Chevron</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-slash-circle mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Slash</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-clipboard mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Clipboard</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-clock mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Clock</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-cloud mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Cloud</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-cloud-fog2 mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Cloud</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-code mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Code</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-collection mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Collection</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-copy mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Copy</span>
                                        </h2>
                                    </div>
                                    <div class="col-6 col-md-4 col-xl-2">
                                        <h2 class="d-flex flex-column align-items-center justify-content-center bg-body-secondary rounded display-6 p-5">
                                            <i class="bi-cursor mb-3"></i>
                                            <span class="fs-7 text-body-secondary">Cursor</span>
                                        </h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

</html>